.image_with_info_layout {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

.mini_container {/* show in 1X2 */
    display-index: 2;
    width: 100%;
    height: 100%;
    align-items: flex-end;
    background-image: url("/common/template.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.mini_title {
    font-size: 16px;
    margin-start: 12px;
    margin-bottom: 12px;
    color: #e5ffffff;
}

.normal_container {
    display-index: 1;
    flex-direction: column;
}

.title_container {/* show in 4X4 */
    display-index: 1;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    flex-weight: 199;
    min-height: 150px;
    background-image: url("/common/template.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.title_sub_container {
    flex-direction: column;
    justify-content: flex-end;
    margin-start: 12px;
    margin-bottom: 12px;
}

.title {
    font-size: 20px;
    color: #e5ffffff;
    margin-bottom: 2px;
}

.content {
    font-size: 16px;
    color: #99ffffff;
}

.items_container {/* show in 2X2,2X4,4X4 */
    display-index: 2;
    align-items: flex-start;
    flex-weight: 133;
    min-height: 100px;
    margin-top: 17px;
}

.item_container {
    margin-bottom: 12px;
    margin-start: 12px;
    margin-end: 16px;
    flex-weight: 1;
    min-width: 126px;
    flex-direction: column;
}

.item_image {
    height: 64%;
    border-radius: 10px;
    justify-content: flex-start;
    align-items: flex-end;
}

.item_space {
    height: 9%;

}

.item_title {
    font-size: 16px;
    color: #e5000000;
}

.item_small_space {
    height: 2%;
}

.item_content {
    font-size: 12px;
    color: #99000000;
    text-overflow: ellipsis;
    max-lines: 1;
}
